<template>
	<view class="wrap">
		<view class="" v-if="applyList.length">
			<view class="title"><text>运动人员名单</text></view>
			<view class="">
				<view class="people_box" v-for="(item, index) in applyList" :key="index">
					<view class="avatar_info flx flx_align_center"  @click="nav_to(`/pages/user/user_visitor?id=${item.UserID}`)">
						<view class="avatar">
							<image @click="prevAvatar(item.HeadImgUrl)"  :src="item.HeadImgUrl" mode="aspectFill"></image>
						</view>
						<view class="name_info">
							<view class="name">{{ item.Name }}</view>
							<view class="right_info">
								<image
									src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710382831357669.png"
									mode="" />
								<text v-if="item.Birthday">{{ getYearStr(item.Birthday) }}后</text>
								<image v-if="item.Birthday" :src="constellate(item.Birthday).icon" mode="" />
								<text v-if="item.Birthday">{{ constellate(item.Birthday).Name }}</text>
								<image
									src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710382852180886.png"
									mode="" />
								<text>{{ item.UserCity }}</text>
								<text class="member member_he" v-if="getUserType(item.UserType) == 1">年卡</text>
								<text class="member number_huan" v-if="getUserType(item.UserType) == 2">金卡</text>
								<text class="member number_huan" v-if="getUserType(item.UserType) == 3">银卡</text>
							</view>
						</view>
					</view>
					<view class="desc_info"></view>
					<view class="footer_info flx flx_align_center flx_justify_center">						
						<view v-if="item.Status <=1" class="rejected" disabled>
							等待对方签到
						</view>
						<view v-else-if="item.Status == 2" class="confirmed" @click="sendreward(item.ID,item.AppointmentID,item.UserID)">
							发放奖励
						</view>
						<view v-else-if="item.Status > 2" class="rejected" disabled>
							已发奖励
						</view>
					</view>
				</view>


			</view>
		</view>

		<block v-else>
			<u-empty mode="list" width="64" height="64"
				icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/community/20230510114106.png" :show="true" iconSize="32"
				text="运动没人哦"></u-empty>

		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ID:'',
				applyList: []
			};
		},
		computed: {
			getOnlineTime(time) {
				return time => {
					let d = new Date(time).valueOf();
					return uni.$u.timeFrom(d);
				};
			},
			getUserType(l) {
				return l => {
					if (l.indexOf('年') != -1) {
						return 1;
					} else if (l.indexOf('金') != -1) {
						return 2;
					} else if (l.indexOf('银') != -1) {
						return 3;
					} else {
						return 0;
					}
				};
			},
			
		
		},
		async onLoad(e) {

			if(e.id){				
				this.ID=e.id;
						
				this.init();
			}
			
		},
		methods: {
			async init(){
				this.applyList=[];
				let res = await this.$api.post('Appointment/Detail', {
					ID: this.ID,
				})
				if (res.data) {					
					res.data.Item.forEach(item => {
						if (item.Status >= 1) {
							this.applyList.push(item);
						}						
					});					
				}		
			},
			async sendreward(id, appointmentId,userid) {			
				const res = await this.$api.post('Appointment/SendReward', {
					ID: id,
					AppointmentID: appointmentId,
					UserID: userid
				})
				
				if (!res.data) {
					this.$pv.msg('发放错误，请稍后')
					return;
				}

				this.$pv.msg('发放成功')
				
				this.init();
			},
			prevAvatar(url) {
				uni.previewImage({
					current: 0,
					urls: [url]
				});
			},
			
		}
	};
</script>

<style lang="scss">
	page,
	.wrap {
		height: 100%;
		background-color: #f6f6f6;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.avatar_info {

		.avatar,
		image {
			border-radius: 50%;
		}

		.avatar {
			margin-right: 20rpx;
			width: 92rpx;
			height: 92rpx;
		}
	}

	.confirmed {
		width: 100%;
		// background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
		background-color: #202020;
		border-radius: 48rpx;
		padding: 22rpx 110rpx;
		margin: 12rpx;
		color: #fff;
	}

	.rejected {
		padding: 22rpx 110rpx;
		border-radius: 48rpx;
		border: 2rpx solid #333;
		margin: 12rpx;
		width: 100%;
	}

	.footer_info {
		flex-wrap: wrap;
		margin-top: 40rpx;

		>view {
			text-align: center;
			width: 60%;
		}

		.reject {
			padding: 22rpx 110rpx;
			border-radius: 48rpx;
			border: 2rpx solid #333;
			margin: 12rpx;
		}

		.confirm {
			background-color: #333;
			border-radius: 48rpx;
			padding: 22rpx 110rpx;
			margin: 12rpx;
			color: #fff;
		}
	}

	.name_info {
		.name {
			font-size: 36rpx;
		}

		.tag_info {
			font-size: 28rpx;
			font-weight: 500;
		}
		
		.right_info {
			line-height: 50rpx;
		
			image {
				height: 32rpx;
				width: 32rpx;
				margin-right: 10rpx;
			}
		
			text {
				display: inline-block;
				padding-right: 16rpx;
				font-size: 34rpx;
				color: #333;
			}
		
			.member {
				display: inline-block;
				width: 68rpx;
				height: 32rpx;
				background: linear-gradient(135deg, #7e7e7e 0%, #292929 100%);
				border-radius: 2px;
				border: 2px solid #d6c6ab;
				text-align: center;
				color: #fff;
				font-size: 16rpx;
				line-height: 32rpx;
				padding-left: 0;
				padding-right: 0;
			}
		
			.number_huan {
				color: #4c310c;
				background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
				border: 2rpx solid #e6ceb5;
			}
		}
	}

	.people_box {
		padding: 32rpx;
		margin: 20rpx 32rpx;
		background: #fff;
		border-radius: 16rpx;
	}

	.title {
		padding: 20rpx 0 10rpx;
		margin-left: 30rpx;
		font-size: 44rpx;
		line-height: 60rpx;
	}
</style>